<template>
  <div id="firstView" class="login">
    <div class="login-logo">
      <img src="/static/imgs/logo.png" alt />
      <h6>欢迎来到第九神秘顾客!</h6>
    </div>
    <div class="login-from">
      <!-- 账号密码登录 -->
      <template v-if="isPasLogin">
        <div class="login-from-field">
          <!-- <img src="/static/imgs/login-input.png" class="login-from-field-bg" alt /> -->
          <img src="/static/imgs/account.png" class="login-from-field-l" alt />
          <van-field
            class="border_bottom"
            v-model="account"
            @blur="accountBlur"
            @input="accountInput"
            placeholder="请输入您的账号"
            clearable
            style="flex:1"
          />
        </div>
        <div class="login-from-field">
          <!-- <img src="/static/imgs/login-input.png" class="login-from-field-bg" alt /> -->
          <img src="/static/imgs/password.png" class="login-from-field-l" alt />
          <van-field
            v-model="password"
            password
            clearable
            placeholder="请输入密码"
            @blur="passwordBlur"
            @input="passwordInput"
            :error-message="passwordErrorMsg"
          />
        </div>
      </template>
      <!-- 验证码登录 -->
      <template v-else>
        <div class="login-from-field">
          <img src="/static/imgs/phone.png" class="login-from-field-l" alt />
          <van-field
            v-model="phone"
            @blur="phoneBlur"
            @input="phoneInput"
            style="flex:1"
            class="border_bottom"
            type="number"
            placeholder="请输入您的手机号"
            clearable
          />
        </div>
        <div class="login-from-field">
          <img
            src="/static/imgs/code.png"
            style="width:38rpx;height:34rpx"
            class="login-from-field-l"
            alt
          />
          <van-field
            v-model="codemsg"
            @blur="codemsgBlur"
            @input="codemsgInput"
            type="number"
            :maxlength="11"
            :error-message="codemsgErrorMsg"
            center
            clearable
            placeholder="请输入验证码"
            use-button-slot
          />
          <span v-if="!isCountdown" @tap="getCode">获取验证码</span>
          <span v-else>{{ time }}s后重试</span>
        </div>
      </template>
      <div class="login-from-submit">
        <van-button
          color="linear-gradient(to right, #30b1f4, #195efc)"
          round
          block
          @click="goIn()"
          type="primary"
        >登录</van-button>
        <h6 @click="isPasLogin=!isPasLogin">{{isPasLogin?'验证码登录':'账号密码登录'}}</h6>
      </div>
    </div>
    <van-popup @close="onClose" :show="pShow">
      <div class="login-main">
        <img src="/static/imgs/protocol.jpg" alt />
        <h6>“第九神秘顾客”小程序用户协议</h6>
        <div class="cont">
          <h5 style="text-align: right;">更新日期：2020年07月03</h5>
          <h5>
            提示条款
            <br />【审慎阅读】用户在登录流程中点击同意本协议之前，应当认真阅读本协议。请用户务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，用户应重点阅读。
            <br />【签约提示】当用户按照登录页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示用户已充分阅读、理解并接受本协议的全部内容。如果用户不同意本协议或其中的任一条款，用户应立即停止注册程序并停止使用【本软件】。
          </h5>
          <h5>一、定义</h5>
          <p>
            【本软件】：本软件名称为“第九神秘顾客”，是易博互通企服科技有限公司在中国大陆地区运营和管理的移动应用程序。
            <br />易博互通：即本软件开发、运营、维护方，即【易博互通企服科技有限公司】。
            <br />软件服务：易博互通基于互联网及本软件所推出以及后续调整的各种无偿或有偿服务。为免疑议，易博互通有权根据实际情况及业务需求调整该等服务，包括但不限于下线软件服务的一部分或全部。
            <br />管理规则：在本软件中已经发布及后续发布、调整的各项规则、解读、解释、公告、说明、澄清、通知等内容。
            <br />同一用户：使用同一身份认证信息并且进行实名认证注册的或经易博互通合理排查认定多个账号的实际控制人为同一人的，均视为同一用户。
          </p>
          <h5>二、协议范围</h5>
          <p>
            2.1 签约主体
            <br />【平等主体】本协议由用户与易博互通共同缔结，本协议对用户与易博互通具有法律约束力。
            <br />【主体信息】本软件的运营方可能会根据业务调整而发生变更，变更后的运营方与用户共同履行本协议并向用户提供服务。
            <br />2.2补充协议
            <br />《隐私政策》、及本软件项下管理规则作为本协议的附件，与本协议具有同等法律效力。如用户使用本软件，视为用户接受本协议及其附件。
            <br />2.3协议内容更新
            <br />由于互联网高速发展，本协议列明的条款并不能完整罗列并覆盖用户与易博互通的所有权利与义务，现有约定也不能保证完全符合未来发展的需求，故而易博互通可能根据国家法律法规变化、运营需求及情况变化适时对本协议进行修改并在本软件中公示。
            <br />如用户不同意本协议修改内容的，用户应当于本协议修改生效之日起停止使用本软件；如用户在本协议修改生效之日仍继续使用本软件，则视为用户同意本协议修改内容。
          </p>
          <h5>三、账号注册、使用、注销、淘汰与禁用</h5>
          <p>
            3.1 用户资格
            <br />在用户开始注册程序及使用本软件时，用户应当具备中华人民共和国法律规定的与用户行为相适应的民事行为能力。若用户不具备前述与用户行为相适应的民事行为能力，则用户及用户的监护人应依照法律规定承担因此而导致的一切后果。
            <br />3.2 账号说明
            <br />【账号注册】当用户按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，您可获得本软件注册用户资格。注册成功后，用户获得账号、本软件的使用权，所有权由易博互通保留。
            <br />【唯一性】每位具备民事行为能力的自然人最多只能注册一个账号；并且只能绑定一个手机且不支持修改手机号码；在唯一的设备上进行登录。
            <br />【账号使用】用户有权自行设置用户的真实姓名、昵称以及相关个人信息、密码，并填写用户邮箱、手机号码，使用手机号码、密码登录和使用本软件。
            <br />由于账号关联用户的个人信息及易博互通的商业信息，账号仅限用户本人使用。未经易博互通同意，用户以授权、转借、买卖、租借或其他形式提供给第三方使用用户账号的行为均属无效，易博互通有权不予接受。
            <br />【用户昵称】用户设置的昵称不得违反国家法律法规及本协议。
            <br />【账号回收】如用户的账号连续两年未登录使用，易博互通有权无偿收回或注销该账号而无须另行通知。自该账号收回之日起，易博互通与用户之间订立的本协议终止。
            <br />【账户注销】
            <br />用户可在本软件内提交账户注销申请。特别提醒，用户账户注销将清零账户内所有数据以及权益（包括但不限于依托于账户而产生的易博互通关联方或第三方合作方给予的权益）及用户个人信息，本系统不对用户注销进行任务补偿。
            <br />【账户淘汰、禁用】
            <br />当用户触犯第九神秘顾客软件的相关规则时候，易博互通有权随时淘汰或者是禁用用户的账号，并且系统不对用户进行补偿。
            <br />3.3 注册信息
            <br />【信息真实】在注册本软件时，用户应当按照提示准确完整地提供用户的个人信息（如用户的电子邮件地址、联系电话、联系地址等），并对其真实性、准确性和完整性承担全部责任。
            <br />3.4 账号安全规范
            <br />【账号安全保管义务】用户的账号密码由用户自行设置并保管，易博互通任何时候均不会主动要求用户提供账号密码。
            <br />如用户发现非本人登录或账号失窃等情况，建议用户立即通知易博互通。用户理解易博互通对用户的任何请求采取行动均需要合理时间，且易博互通应用户请求而采取的行动可能无法避免或阻止侵害后果的形成或扩大，除易博互通存在重大过错外，易博互通不承担责任。
            <br />账号及密码因用户主动泄露或因用户遭受他人攻击、诈骗等行为导致的损失及后果，易博互通并不承担责任，用户应通过司法、行政等救济途径向侵权行为人追偿。
            <br />【账号行为责任】用户应对用户账号项下的所有行为结果（包括但不限于在线签署各类协议、发布信息、购买商品及服务及披露信息等）负责。
          </p>
          <h5>四、责任限制及免除</h5>
          <p>
            用户同意，对于下述原因导致的本协议履行障碍、履行瑕疵或履行内容变更等情形，易博互通无需承担违约责任：
            <br />（1）自然灾害、罢工、暴乱、战争、政府行为、国家法律法规或政策要求、司法行政命令等不可抗力因素；
            <br />（2）电力供应故障、通讯网络故障、电信网络资源受限等公共服务因素或黑客攻击第三人因素；
            <br />（3）常规或紧急的设备与系统维护、设备与系统故障处理。
            <br />（4）在接受并完成任务过程中出现人身、财产损失
          </p>
          <h5>五、用户信息的保护及授权</h5>
          <p>
            5.1个人信息的保护
            <br />易博互通严格依据有关法律法规保护用户个人信息（能够独立或与其他信息结合后识别用户身份的信息）。用户同意易博互通按照本软件或易博互通另行公布的隐私权政策收集、存储、使用、披露和保护用户的个人信息。易博互通希望通过隐私政策向用户清楚地介绍易博互通对用户个人信息的处理方式，因此易博互通建议用户完整地阅读隐私政策，以帮助用户更好地保护用户的隐私权。
            <br />5.2合法使用义务
            <br />【信息的发布】用户声明并保证，用户对用户所发布、提供的信息拥有相应、合法的权利。否则，易博互通可对用户发布的信息进行删除或屏蔽。
            <br />【禁止性规定】用户应当确保用户所发布的信息不包含以下内容，亦不得将【本软件】用于以下内容或用途：
            <br />（1）违反国家法律法规或规范性文件涉及的禁止性规定的；
            <br />（2）政治宣传、封建迷信、淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；
            <br />（3）欺诈、虚假、不准确或存在误导性的；
            <br />（4）侵犯他人知识产权或涉及第三方商业秘密及其他专有权利的；
            <br />（5）侮辱、诽谤、恐吓、涉及他人隐私等侵害他人合法权益的；
            <br />（6) 存在可能破坏、篡改、删除、影响【本软件】正常运行或未经授权获取【本软件】及其他用户的数据、个人资料的病毒、木马、爬虫等恶意软件、程序代码的；
            <br />（7）其他违背社会公共利益或公共道德或依据相关本协议不适合在【本软件】发布的。
            <br />5.3授权使用
            <br />对于用户提供、发布在本软件中的文字、图片、视频、音频（用户个人身份识别信息除外），用户同意授予易博互通及其关联公司全球性的、无偿的被许可使用的权利。用户进一步同意，易博互通及其关联公司可以存储、使用、复制、修订、编辑、发布、展示、翻译、分发用户的非个人身份识别信息或制作衍生作品，并以已知或日后开发的形式、媒体或技术将上述信息纳入易博互通自有或与第三方合作的作品内。
            <br />知识产权：上传文字图片知识产权、侵权处理（与商家、与顾客）；确定具体情形后法务补充。
            <br />行为限制：如上传的图片不符合要求等情况及其处理，不得有违法行为等。确定具体情形后法务补充
          </p>
          <h5>六、违约责任</h5>
          <p>
            6.1 用户使用本软件时应严格遵守本协议。如有证据证明或易博互通有理由相信用户存在违约本协议的情形，易博互通有权视情形采取冻结或注销账号、淘汰账号、禁用账号、取消任务订单、拒绝提供服务、终止本协议、追究法律责任等措施。如用户的违约行为给易博互通及第三方造成损失的，用户还应承担赔偿责任。
            <br />6.2除依据本协议、现有法律法规认定是否构成违约外，用户理解并同意：
            <br />为适应互联网高速发展和满足海量用户对高效优质服务的需求，易博互通可以进一步规定违约认定的程序和标准。如：易博互通可依据用户的用户数据与海量用户数据的关系来认定用户是否构成违约；用户有义务对用户的数据异常现象进行充分举证和合理解释，否则将被认定为违约。
            <br />6.3易博互通可将对用户违约行为的处理措施信息以及其他经国家行政或司法机关生效法律文书确认的处理或裁判结果在第九神秘顾客平台上予以公示。
            <br />6.4如用户向易博互通及/或其关联公司的雇员或顾问等提供实物、现金、现金等价物、劳务、旅游等价值明显超出正常商业交易习惯的利益，则可视为用户存在商业贿赂行为。发生上述情形的，易博互通可立即终止与用户的所有合作并向用户收取违约金及/或赔偿金，该等金额可依据下述规则加以计算：
            <br />（1）易博互通因用户的商业贿赂行为而遭受的经济损失、商誉损失；
            <br />（2）用户因商业贿赂所获得的利益。
            <br />6.5如用户违反其与易博互通或易博互通关联公司之间的其他协议、合同条款，则视为构成用户于本协议项下的违约，易博互通有权终止本协议。
          </p>
          <h5>七、 通知</h5>
          <p>
            7.1联系及通知方式
            <br />用户在注册及使用本软件时，应当向易博互通提供真实有效的联系方式（如用户的电子邮件地址、联系电话、联系地址等），对于联系方式发生变更的，用户有义务及时更新有关信息，并保持可被联系的状态。
            <br />用户进一步同意，本软件内置的相关通知、提示、公告程序亦构成通知用户的合法途径，易博互通有权通过【本软件】内置的前述程序履行通知义务，且视为易博互通已经适格的履行了通知义务。
            <br />易博互通将向用户的上述联系方式的其中之一或其中若干向用户送达各类通知，而此类通知的内容可能对用户的权利义务产生重大的有利或不利影响，请用户务必及时关注。如易博互通依本协议适格履行了相关通知义务而用户主张未获悉通知内容的，易博互通不承担责任。
          </p>
          <h5>八、法律适用、管辖与其他</h5>
          <p>
            【法律适用】本协议之订立、生效、解释、修订、补充、终止、执行与争议解决均适用中华人民共和国法律；如法律无相关规定的，参照商业惯例及/或行业惯例。
            <br />【管辖】用户因使用本软件所产生及与本软件有关的争议，由易博互通与用户协商解决。协商不成时，任何一方均可向被告所在地人民法院提起诉讼。
            <br />【可分性】本协议任一条款被视为废止、无效或不可执行，该条应视为可分的且并不影响本协议其余条款的有效性及可执行性。
          </p>
        </div>
        <!-- <button open-type="getUserInfo" @getuserinfo="getUserInfo">同意</button> -->
        <button @click="getUserInfo">同意</button>
      </div>
    </van-popup>
    <div class="login-protocol">
      <van-radio name="1" shape="square" icon-size="12px" v-model="radio" @click="readAll">我已阅读</van-radio>
      <span @click="pShowUseDeal">软件使用协议</span>
    </div>
    <div style="width:100%;height:118px"></div>
    <div class="login-footer">
      <img src="/static/imgs/login-bg.png" alt />
    </div>
    <van-toast id="van-toast" />
    <!--滑块组件-->
    <ne-captcha
      id="captcha"
      captcha-id="a242c51a9ca04c6b8e578071f190199c"
      width="300px"
      @verify="handlerVerify"
      @close="handlerClose"
    />
  </div>
</template>
<script>
import Dialog from "@/../static/vant/dialog/dialog";
import Toast from "@/../static/vant/toast/toast";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";
import util from "../../utils/tools";
export default {
  data() {
    return {
      isPasLogin: false,
      radio: "1", //  1选中 true，0未选中false
      pShow: false, //  协议弹窗
      aShow: false, //  协议弹窗
      phone: "13126519305", //17636573497 //15811065823
      codemsg: "666666", //666666
      account: "",
      password: "",
      phoneErrorMsg: "",
      accountErrorMsg: "",
      codemsgErrorMsg: "", // 验证码提示
      passwordErrorMsg: "", // 密码提示
      userInfo: "",
      isCountdown: false,
      time: 59,
      loginType: 1, //验证码1 账号密码3
      isBack: false,
    };
  },
  onLoad(option) {
    let pages = getCurrentPages();
    let prevpage = pages[pages.length - 2];
    if (prevpage) {
      this.isBack = true;
    } else {
      this.isBack = false;
    }
  },
  onShow() {
    this.isCountdown = false;
    this.fnInit();
    this.loginType = this.isPasLogin ? 3 : 1;
    this.phone = "";
    this.codemsg = "";
    this.account = "";
    this.password = "";
  },
  watch: {
    isPasLogin() {
      this.loginType = this.isPasLogin ? 3 : 1;
      this.phone = "";
      this.codemsg = "";
      this.account = "";
      this.password = "";
    }
  },
  methods: {
    // 验证码验证结果回调
    handlerVerify: function (ev) {
      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
      if (!ev.mp.detail[0]) {
        // 验证成功 调用领取任务接口 或者阿里认证页面
        if (this.phone) {
          if (/^1[3456789]\d{9}$/.test(this.phone)) {
            this.phoneErrorMsg = "";
            //            disable = false;
          } else {
            this.phoneErrorMsg = "您输入的手机号码有误";
            //            disable = true;
            return;
          }
        } else if (this.phone == "") {
          this.phoneErrorMsg = "";
          return;
          //            disable = true
        } else {
          this.phoneErrorMsg = "输入的手机号不能为空";
          return;
          //            disable = true
        }

        //  获取短信验证码接口
        this.$http
          .post({
            url: "/mobile/api/sms",
            data: {
              /*"token":"admintoken",
              "uid":"100101",*/
              type: 1,
              mobile: "+86" + this.phone
            }
          })
          .then(res => {
            if (res.code == "RX0000") {
              //            this.user.userInfo = res.data
              this.isCountdown = true;
              let timer = setInterval(() => {
                if (this.time === 0) {
                  clearInterval(timer);
                  this.isCountdown = false;
                  this.time = 59;
                  return;
                }
                this.time--;
              }, 1000);
              wx.showToast({
                title: "验证码发送成功"
              });
            } else {
              wx.showToast({
                title: res.msg
              });
            }
          });
      } else {
        // 验证失败
        // 请不要在验证失败中调用reset，验证码内部会进行相应处理
      }
    },
    fnInit() {
      this.$http
        .post({
          url: "/mobile/api/client/init",
          data: {}
        })
        .then(res => {
          wx.setStorageSync("initData", res.data);
        });
    },
    //  电话正则校验 长度限制11位
    phoneBlur(event) {
      this.phone = event.mp.detail.value;
      this.phone = this.phone.slice(0, 11);
      this.phone = this.phone.trim();
      //        let disable = '' 登录
      if (this.phone) {
        if (/^1[3456789]\d{9}$/.test(this.phone)) {
          this.phoneErrorMsg = "";
          //            disable = false;
        } else {
          this.phoneErrorMsg = "您输入的手机号码有误";
          //            disable = true;
        }
      } else if (this.phone == "") {
        this.phoneErrorMsg = "";
        //            disable = true
      } else {
        this.phoneErrorMsg = "输入的手机号不能为空";
        //            disable = true
      }
    },
    phoneInput(event) {
      this.phone = event.mp.detail;
    },
    //  验证码正则校验 长度限制11位
    codemsgBlur(event) {
      this.codemsg = event.mp.detail.value;
      this.codemsg = this.codemsg.slice(0, 6);
      this.codemsg = this.codemsg.trim();
      if (this.codemsg) {
        if (/^\d{6}$/.test(this.codemsg)) {
          this.codemsgErrorMsg = "";
        } else {
          this.codemsgErrorMsg = "您输入的验证码有误";
        }
      } else if (this.codemsg == "") {
        this.codemsgErrorMsg = "";
      } else {
        this.codemsgErrorMsg = "输入的验证码不能为空";
      }
    },
    codemsgInput(event) {
      this.codemsg = event.mp.detail;
    },
    //  获取验证码
    getCode() {
      if (this.phone && !this.phoneErrorMsg) {
        this.$root.$mp.page.selectComponent("#captcha").popup();
      } else {
        Toast("请输入正确的手机号码");
      }
    },
    handlerClose() {
      this.$root.$mp.page.selectComponent("#captcha").reset();
    },
    //  账号校验/手机号规则 长度限制11位
    accountBlur(event) {
      this.account = event.mp.detail.value;
      this.account = this.account.slice(0, 11);
      this.account = this.account.trim();
      if (this.account) {
        // '/^1[3456789]\d{9}$/'
        if (/^[1-9][0-9]\d{9}$/.test(this.account)) {
          this.accountErrorMsg = "";
        } else {
          this.accountErrorMsg = "您输入的账号有误";
        }
      } else if (this.account == "") {
        this.accountErrorMsg = "";
      } else {
        this.accountErrorMsg = "输入的账号不能为空";
      }
    },
    accountInput(event) {
      this.account = event.mp.detail;
    },
    //  至少6位大小写字母+数字 密码验证 长度限制11位
    passwordBlur(event) {
      this.password = event.mp.detail.value;
      this.password = this.password.trim();
      if (this.password.length < 6) {
        //        if (this.password.length < 6 || this.password.length > 20) { 密码长度在6到20之间
        //密码长度大于6
        if (this.password.length === 0) {
          this.passwordErrorMsg = "您输入的密码不能为空";
        } else {
          this.passwordErrorMsg = "您输入的密码长度有误";
        }
      }
      /*----------------以上长度限制，以下格式限制---------------*/
      if (this.password) {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.password)) {
          //          if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.password)) {
          this.passwordErrorMsg = "";
        } else {
          this.passwordErrorMsg = "密码至少6位大小写字母+数字";
          //            this.passwordErrorMsg = '您输入的密码格式有误';
        }
      } else if (this.password == "") {
        this.passwordErrorMsg = "";
      } else {
        this.passwordErrorMsg = "输入的密码不能为空";
      }
    },
    passwordInput(event) {
      this.password = event.mp.detail;
    },
    pShowUseDeal() {
      this.pShow = true;
    },
    getUserInfo(event) {
      this.pShow = false;
    },
    onClose(event) {
      if (event.mp.detail === "confirm") {
        // 异步关闭弹窗
        setTimeout(() => {
          this.pShow = false;
        }, 1000);
      } else {
        this.pShow = false;
      }
    },
    readAll() {
      if (this.radio == "1") {
        this.radio = "0";
      } else {
        this.radio = "1";
      }
    },
    //  登录
    goIn() {
      if (this.radio == "1") {
        this.account = this.account.slice(0, 11);
        this.account = this.account.trim();
        this.phone = this.phone.slice(0, 11);
        this.phone = this.phone.trim();
        //  手机号验证码登录
        if (!this.isPasLogin) {
          //  手机号验证码校验
          if (this.phone == "" || this.codemsg == "") {
            Toast("您输入的手机号码或者验证码不能为空");
            return;
          }
          if (
            !/^1[3456789]\d{9}$/.test(this.phone) ||
            !/^\d{6}$/.test(this.codemsg)
          ) {
            Toast("您输入的手机号码或者验证码有误");
            return;
          }
          if (this.phone && this.codemsg) {
            if (
              /^1[3456789]\d{9}$/.test(this.phone) &&
              /^\d{6}$/.test(this.codemsg)
            ) {
              /*接口请求，请求成功后跳转页面*/

              //  手机号验证码接口

              this.$http
                .post({
                  url: "/mobile/api/login",
                  data: {
                    type: this.loginType,
                    mobile: this.phone,
                    // code: '666666', // 开发默认验证码
                    code: this.codemsg ? Number(this.codemsg) : "",
                    area_code: "+86",
                    language: "zh_cn"
                  }
                })
                .then(res => {
                  if (res.code == "RX0000") {
                    this.userInfo = res.data;
                    setStorage("token", this.userInfo.token);
                    // 登录成功用户信息缓存到本地
                    wx.setStorageSync("userInfo", this.userInfo);
                    // 是否需要返回上一页，  退出登录不需要
                    if (this.isBack) {
                      wx.navigateBack();
                    } else {
                      wx.switchTab({
                        url: "/pages/books/main"
                      });
                    }
                  } else {
                    wx.showToast({
                      title: res.msg,
                      icon: "none"
                    });
                  }
                });
            }
          }
          //  账号密码登录
        } else {
          //  账号密码校验
          if (this.account == "" || this.password == "") {
            Toast("您输入的账号或者密码不能为空");
            return;
          }
          if (
            !/^[1-9][0-9]\d{9}$/.test(this.account) ||
            !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.password)
          ) {
            Toast("您输入的账号或者密码有误");
            return;
          }
          if (this.account && this.password) {
            if (
              /^[1-9][0-9]\d{9}$/.test(this.account) &&
              /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.password)
            ) {
              this.$http
                .post({
                  url: "/mobile/api/login",
                  data: {
                    type: this.loginType,
                    mobile: this.phone,
                    // code: '666666', // 开发默认验证码
                    code: this.codemsg,
                    username: this.account,
                    password: this.$md5(this.password),
                    area_code: "+86",
                    language: "zh_cn"
                  }
                })
                .then(res => {
                  if (res.code == "RX0000") {
                    this.userInfo = res.data;
                    setStorage("token", this.userInfo.token);
                    // 登录成功用户信息缓存到本地
                    wx.setStorageSync("userInfo", this.userInfo);
                    // setStorage('userInfo',this.userInfo)
                    // 是否需要返回上一页，  退出登录不需要
                    if (this.isBack) {
                      wx.navigateBack();
                    } else {
                      wx.switchTab({
                        url: "/pages/books/main"
                      });
                    }
                  } else {
                    wx.showToast({
                      title: res.msg,
                      icon: "none"
                      /* icon: 'loading',
                      duration: 2000,
                      mask: true,*/
                    });
                  }
                });
            }
          }
        }
      } else {
        Toast.fail("请勾选并阅读软件使用协议");
      }
    }
  }
};
</script>
<style lang="less">
.login {
  width: 100%;
  &-logo {
    width: 100%;
    margin-top: 63px;
    > img {
      width: 140px;
      height: 140px;
      display: block;
      margin: 0 auto;
    }
    > h6 {
      text-align: center;
      font-size: 16px;
      color: #226df0;
      // font-weight: 500;
      line-height: 1;
      margin-top: 16px;
    }
  }
  &-from {
    width: 100%;
    margin-top: 37px;
    padding: 0 33px;
    box-sizing: border-box;
    &-field {
      width: 100%;
      height: 58px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 25px;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: #fff;
      box-shadow: -5px 5px 8px 2px #f6f6f6;
      .van-cell {
        padding: 0 16px;
        line-height: 1;
        height: 100%;
      }
      .van-cell:after {
        display: none;
      }
      &-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        z-index: -1;
        top: 0;
      }
      &-l {
        width: 15px;
        height: 16px;
      }
      .van-field__input {
        font-size: 16px;
        color: #999999;
        font-weight: 400;
        line-height: 1;
      }
      > span {
        display: block;
        flex: 1;
        color: #2574ff;
        font-size: 14px;
        font-weight: 400;
        border-left: 1px solid #999;
        white-space: nowrap;
        padding: 0 5px;
      }
    }
    &-submit {
      width: 100%;
      margin-top: 31px;
      .van-button {
        height: 40px;
        font-size: 16px;
        font-weight: 600;
      }
      > h6 {
        margin-top: 12px;
        text-align: center;
        font-size: 12px;
        color: #3479f4;
        line-height: 1;
      }
    }
  }
  &-protocol {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    font-size: 10px;
    > span {
      color: #226df0;
    }
    .van-radio__label {
      color: #666666;
    }
  }
  .van-popup {
    overflow: initial;
    border-radius: 10px;
  }
  &-main {
    width: 314px;
    padding: 0 22px;
    box-sizing: border-box;
    .cont {
      height: 270px;
      overflow: scroll;
      > h5 {
        // font-size: 14px;
        // color: #666666;
        // font-weight: 400;
        // line-height: 22px;
        color: #999999;
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;
      }
      > p {
        color: #999999;
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;
      }
    }
    > img {
      width: 50px;
      height: 64px;
      margin: -32px auto 0;
      display: block;
    }
    > h6 {
      font-size: 16px;
      color: #333333;
      font-weight: 400;
      line-height: 22px;
      text-align: center;
      margin-bottom: 13px;
      margin-top: 8px;
    }

    > button {
      width: 89px;
      height: 31px;
      background: linear-gradient(to right, #30b1f4, #195efc);
      display: block;
      margin: 29px auto 34px;
      line-height: 31px;
      font-size: 13px;
      color: #fff;
      border-radius: 30px;
    }
  }
  &-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 118px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
